@extends('admin.main')

@section('content')
<div class="wrapper wrapper-content">
	<div class="m-b">
		<a href="javascript:;" class="btn btn-default" onclick="history.back();"><i class="fa fa-angle-double-left"></i> 返回列表</a>
	</div>
	<div class="ibox float-e-margins">
		<div class="ibox-title">
			<h5>新增练习题</h5>
		</div>
		<div class="ibox-content">
			<form id="formAdd" method="post" class="form-horizontal" onsubmit="return false;">
				<div class="form-group">
					<label class="col-lg-2 control-label">题型：</label>
					<div class="col-lg-2">
						<select id="typeChoise" name="type" onchange="loadTopicFormitem(this.value)" class="form-control">
							<option value="0">- 请选择 -</option>
							@foreach($typeArr as $k => $v)
							<option value="{{$k}}">{{$v}}</option>
							@endforeach
						</select>
					</div>
				</div>
				<div class="hr-line-dashed"></div>
				<div id="boxFormContent">
				</div>
				<div class="form-group">
					<div class="col-lg-4 col-lg-offset-2">
						<button class="btn btn-warning btn-w-m" type="submit">提交</button>
					</div>
				</div>
			</form>
		</div>
	</div>
</div>

<!-- 单项选择题 -->
<script id="tplChoiseRows" type="text/html">
	<div class="form-group">
		<label class="col-lg-2 control-label">题目：</label>
		<div class="col-lg-10">
			<div id="ueditor_topic" class="summernote"></div>
		</div>
	</div>
	<div class="form-group m-b-n">
		<label class="col-lg-2 control-label">选项：</label>
		<div id="choiseOptions" class="col-lg-10">
			<div class="input-group">
				<span class="input-group-btn">
					<button type="button" class="btn btn-white">A</button>
				</span>
				<input type="text" name="options[]" placeholder="选项" class="form-control" />
			</div>
			<div class="input-group">
				<span class="input-group-btn">
					<button type="button" class="btn btn-white">B</button>
				</span>
				<input type="text" name="options[]" placeholder="选项" class="form-control" />
			</div>
			<div class="input-group">
				<span class="input-group-btn">
					<button type="button" class="btn btn-white">C</button>
				</span>
				<input type="text" name="options[]" placeholder="选项" class="form-control" />
				<span class="input-group-btn">
					<button type="button" class="btn btn-danger js-removeoption"> <i class="fa fa-times"></i>
					</button>
				</span>
			</div>
			<div class="input-group">
				<span class="input-group-btn">
					<button type="button" class="btn btn-white">D</button>
				</span>
				<input type="text" name="options[]" placeholder="选项" class="form-control" />
				<span class="input-group-btn">
					<button type="button" class="btn btn-danger js-removeoption"> <i class="fa fa-times"></i>
					</button>
				</span>
			</div>
		</div>
	</div>
	<div class="form-group m-t-n">
		<div class="col-lg-8 col-lg-offset-2">
			<a href="javascript:;" onclick="addChoiseOption()">
				<i class="fa fa-plus"></i>
				添加选项
			</a>
		</div>
	</div>
	<div class="form-group">
		<label class="col-lg-2 control-label">答案：</label>
		<div id="choiseAnswer" class="col-lg-10">
			<label class="radio-inline i-checks"><input type="radio" name="answer" value="A" /> A</label>
			<label class="radio-inline i-checks"><input type="radio" name="answer" value="B" /> B</label>
			<label class="radio-inline i-checks"><input type="radio" name="answer" value="C" /> C</label>
			<label class="radio-inline i-checks"><input type="radio" name="answer" value="D" /> D</label>
		</div>
	</div>
	<div class="hr-line-dashed"></div>
</script>

<!-- 单项选择选项 -->
<script id="tplOptionRow" type="text/html">
	<div class="input-group">
		<span class="input-group-btn">
			<button type="button" class="btn btn-white"></button>
		</span>
		<input type="text" name="options[]" placeholder="选项" class="form-control" />
		<span class="input-group-btn">
			<button type="button" class="btn btn-danger js-removeoption"> <i class="fa fa-times"></i>
			</button>
		</span>
	</div>
</script>

<!-- 填空题题目 -->
<script id="tplFillblankRows" type="text/html">
	<div class="form-group">
		<label class="col-lg-2 control-label">题目：</label>
		<div class="col-lg-10">
			<div id="ueditor_topic" class="summernote"></div>
		</div>
	</div>
	<div class="form-group m-b-n">
		<label class="col-lg-2 control-label">答案：</label>
		<div id="fillblankAnwers" class="col-lg-10">
			<div class="input-group">
				<span class="input-group-btn">
					<button type="button" class="btn btn-white">1</button>
				</span>
				<input type="text" name="answer[]" placeholder="答案" class="form-control" />
			</div>
		</div>
	</div>
	<div class="form-group m-t-n">
		<div class="col-lg-8 col-lg-offset-2">
			<a href="javascript:;" onclick="addAnswer()">
				<i class="fa fa-plus"></i>
				添加答案
			</a>
		</div>
	</div>
	<div class="hr-line-dashed"></div>
</script>

<!-- 填空题题目答案 -->
<script id="tplAnswerRow" type="text/html">
	<div class="input-group">
		<span class="input-group-btn">
			<button type="button" class="btn btn-white"></button>
		</span>
		<input type="text" name="answer[]" placeholder="答案" class="form-control" />
		<span class="input-group-btn">
			<button type="button" class="btn btn-danger js-removeanswer"> <i class="fa fa-times"></i>
			</button>
		</span>
	</div>
</script>

<!-- 完形填空题目 -->
<script id="tplClozetestRows" type="text/html">
	<div class="form-group">
		<label class="col-lg-2 control-label">文章：</label>
		<div class="col-lg-10">
			<div id="ueditor_topic" class="summernote"></div>
		</div>
	</div>
	<div id="clozetestOptions">
		<div class="form-group">
			<input type="hidden" name="answer[]" value="A" />
			<label class="col-lg-2 control-label">
				<strong>1</strong>
			</label>
			<div class="col-lg-10">
				<div class="row">
					<div class="col-lg-3">
						<div class="input-group">
							<span class="input-group-btn">
								<button type="button" class="btn btn-primary">A</button>
							</span>
							<input type="text" name="options[]" placeholder="点击左侧字母标记答案" class="form-control" />
						</div>
					</div>
					<div class="col-lg-3">
						<div class="input-group">
							<span class="input-group-btn">
								<button type="button" class="btn btn-white">B</button>
							</span>
							<input type="text" name="options[]" placeholder="选项" class="form-control" />
						</div>
					</div>
					<div class="col-lg-3">
						<div class="input-group">
							<span class="input-group-btn">
								<button type="button" class="btn btn-white">C</button>
							</span>
							<input type="text" name="options[]" placeholder="选项" class="form-control" />
						</div>
					</div>
					<div class="col-lg-3">
						<div class="input-group">
							<span class="input-group-btn">
								<button type="button" class="btn btn-white">D</button>
							</span>
							<input type="text" name="options[]" placeholder="选项" class="form-control" />
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="form-group m-t-n">
		<div class="col-lg-8 col-lg-offset-2">
			<a href="javascript:;" onclick="addClozeOption()">
				<i class="fa fa-plus"></i>
				增加选项
			</a>
		</div>
	</div>
	<div class="hr-line-dashed"></div>
</script>

<!-- 完形填空选项 -->
<script id="tplClozetestOption" type="text/html">
	<div class="form-group">
		<input type="hidden" name="answer[]" value="A" />
		<label class="col-lg-1 text-right"></label>
		<label class="col-lg-1 control-label">
			<a href="javascript:;" class="label label-danger js-removecloze m-r"><i class="fa fa-trash"></i> 删除</a><strong>2</strong>
		</label>
		<div class="col-lg-10">
			<div class="row">
				<div class="col-lg-3">
					<div class="input-group">
						<span class="input-group-btn">
							<button type="button" class="btn btn-primary">A</button>
						</span>
						<input type="text" name="options[]" placeholder="点击左侧字母标记答案" class="form-control" />
					</div>
				</div>
				<div class="col-lg-3">
					<div class="input-group">
						<span class="input-group-btn">
							<button type="button" class="btn btn-white">B</button>
						</span>
						<input type="text" name="options[]" placeholder="选项" class="form-control" />
					</div>
				</div>
				<div class="col-lg-3">
					<div class="input-group">
						<span class="input-group-btn">
							<button type="button" class="btn btn-white">C</button>
						</span>
						<input type="text" name="options[]" placeholder="选项" class="form-control" />
					</div>
				</div>
				<div class="col-lg-3">
					<div class="input-group">
						<span class="input-group-btn">
							<button type="button" class="btn btn-white">D</button>
						</span>
						<input type="text" name="options[]" placeholder="选项" class="form-control" />
					</div>
				</div>
			</div>
		</div>
	</div>
</script>

<!-- 阅读理解题目 -->
<script id="tplReadingRows" type="text/html">
	<div class="form-group">
		<label class="col-lg-2 control-label">阅读：</label>
		<div class="col-lg-10">
			<div id="ueditor_topic" class="summernote"></div>
		</div>
	</div>
	<div id="readingOptions">
		<div class="form-group" style="border-top:1px dashed #e7eaec;margin-bottom:0;">
			<label class="col-lg-2 control-label">题目：</label>
			<div class="col-lg-10">
				<div class="ibox">
					<div class="ibox-tools">
						<a class="js-copy"> <i class="fa fa-copy"></i> 复制</a>
					</div>
					<div class="col-lg-12 m-b chat">
						<textarea name="subtopic[]" rows="2" class="form-control"></textarea>
						<input type="hidden" name="answer[]" value="A" />
					</div>
					<div class="col-lg-3">
						<div class="input-group">
							<span class="input-group-btn">
								<button type="button" class="btn btn-primary">A</button>
							</span>
							<input type="text" name="options[]" placeholder="点击左侧字母标记答案" class="form-control" />
						</div>
					</div>
					<div class="col-lg-3">
						<div class="input-group">
							<span class="input-group-btn">
								<button type="button" class="btn btn-white">B</button>
							</span>
							<input type="text" name="options[]" placeholder="选项" class="form-control" />
						</div>
					</div>
					<div class="col-lg-3">
						<div class="input-group">
							<span class="input-group-btn">
								<button type="button" class="btn btn-white">C</button>
							</span>
							<input type="text" name="options[]" placeholder="选项" class="form-control" />
						</div>
					</div>
					<div class="col-lg-3">
						<div class="input-group">
							<span class="input-group-btn">
								<button type="button" class="btn btn-white">D</button>
							</span>
							<input type="text" name="options[]" placeholder="选项" class="form-control" />
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="hr-line-dashed"></div>
</script>
@endsection

@section('pageheader')
<link rel="stylesheet" href="{{asset('assets/iCheck/custom.css')}}" />
<link rel="stylesheet" href="{{asset('assets/summernote/summernote.css')}}" />
@endsection

@section('pagescript')
<script src="{{asset('assets/iCheck/icheck.min.js')}}"></script>
<script src="{{asset('assets/summernote/summernote.min.js')}}"></script>
<script>
	$("#side-menu li[rel='examtopic']").addClass("active")
	  .parents("ul").addClass("in").parents("li").addClass("active");

	var loadTopicFormitem = function(type){
		switch(parseInt(type)){
			case 1: // 单项选择
				$("#boxFormContent").html(template("tplChoiseRows", null));
				loadSummernote($('#ueditor_topic'));
				iCheckRender();
				break;
			case 2: // 填空
				$("#boxFormContent").html(template("tplFillblankRows", null));
				loadSummernote($('#ueditor_topic'));
				break;
			case 3: // 完形填空
				$("#boxFormContent").html(template("tplClozetestRows", null));
				loadSummernote($('#ueditor_topic'));
				for(var i=0; i<9; i++){
					addClozeOption();
				}
				break;
			case 4: //阅读理解
				$("#boxFormContent").html(template("tplReadingRows", null));
				loadSummernote($('#ueditor_topic'));
				for(var i=0; i<4; i++){
					$("#boxFormContent .js-copy").trigger("click");
				}
				break;
			default:
				$("#boxFormContent").html("");
				break;
		}
	};

	$(function(){
		$("#typeChoise").find("option[value='1']").attr("selected", true);
		loadTopicFormitem(1);
	});

	// Summernote 编辑器上传图片
	var sendFile = function (file, editor, welEditable) {
		var data = new FormData();
		data.append("upfile", file, file.name || ('blob.' + file.type.substr('image/'.length)));
		$.ajax({
			data: data,
			type: "POST",
			dataType: "json",
			url: "{{url('ueditor?action=uploadimage')}}",
			cache: false,
			contentType: false,
			processData: false,
			success: function(data) {
				editor.insertImage(welEditable, data.url);
			}
		});
	};

	// 加载 Summernote 编辑器
	var loadSummernote = function(editor){
		editor.summernote({
			onImageUpload: function(files, editor, welEditable) {
				sendFile(files[0], editor, welEditable);
			}
		});
	};

	// 渲染 radio
	var iCheckRender = function(){
		$('.i-checks').iCheck({
      checkboxClass: 'icheckbox_square-green',
      radioClass: 'iradio_square-green',
    });
	};

	// 增加单项选择选项
	var addChoiseOption = function(){
		$("#choiseOptions").append(template("tplOptionRow", null));
		$("#choiseAnswer").html("");
		$("#choiseOptions").find(".btn-white").each(function(i){
			var letter = String.fromCharCode(i+65);
			$(this).text(letter);
			$("#choiseAnswer").append('<label class="radio-inline i-checks"><input type="radio" name="answer" value="'+letter+'" /> '+letter+'</label>');
			iCheckRender();
		});
	};

	// 删除单项选择选项
	$("#boxFormContent").delegate(".js-removeoption", "click", function(){
		$(this).parents(".input-group").eq(0).remove();
		$("#choiseAnswer").html("");
		$("#choiseOptions").find(".btn-white").each(function(i){
			var letter = String.fromCharCode(i+65);
			$(this).text(letter);
			$("#choiseAnswer").append('<label class="radio-inline i-checks"><input type="radio" name="answer" value="'+letter+'" /> '+letter+'</label>');
			iCheckRender();
		});
	});

	// 增加填空题答案
	var addAnswer = function(){
		$("#fillblankAnwers").append(template("tplAnswerRow", null));
		$("#fillblankAnwers").find(".btn-white").each(function(i){
			$(this).text(i+1);
		});
	};

	// 删除填空题答案
	$("#boxFormContent").delegate(".js-removeanswer", "click", function(){
		$(this).parents(".input-group").eq(0).remove();
		$("#fillblankAnwers").find(".btn-white").each(function(i){
			$(this).text(i+1);
		});
	});

	// 增加完形填空题目
	var addClozeOption = function(){
		$("#clozetestOptions").append(template("tplClozetestOption", null));
		$("#clozetestOptions").find(".control-label strong").each(function(i){
			$(this).text(i+1);
		});
	};

	// 设置完形填空题目答案
	$("#boxFormContent").delegate("#clozetestOptions .btn", "click", function(){
		$(this).parents(".row").eq(0).find(".btn").each(function(){
			$(this).removeClass("btn-primary").addClass("btn-white");
		});
		$(this).removeClass("btn-white").addClass("btn-primary");
		$(this).parents(".form-group").eq(0).find("input[name='answer[]']").val($(this).text());
	});

	// 删除完形填空题目
	$("#boxFormContent").delegate(".js-removecloze", "click", function(){
		$(this).parents(".form-group").eq(0).remove();
		$("#clozetestOptions").find(".control-label strong").each(function(i){
			$(this).text(i+1);
		});
	});

	// 增加阅读理解题目
	$("#boxFormContent").delegate(".js-copy", "click", function(){
		var html = $(this).parents(".form-group").clone();
		$(html).find(".js-copy").after('<a class="js-remove text-danger"><i class="fa fa-times"></i> \u5220\u9664</a>').remove();
		$("#readingOptions").append(html);
	});

	// 设置阅读理解题目答案
	$("#boxFormContent").delegate("#readingOptions .btn", "click", function(){
		$(this).parents(".ibox").eq(0).find(".btn").each(function(){
			$(this).removeClass("btn-primary").addClass("btn-white");
		});
		$(this).removeClass("btn-white").addClass("btn-primary");
		$(this).parents(".form-group").eq(0).find("input[name='answer[]']").val($(this).text());
	});

	// 删除阅读理解题目
	$("#boxFormContent").delegate(".js-remove", "click", function(){
		$(this).parents(".form-group").remove();
	});

	$("#formAdd").on("submit", function(){
		var form = this, formdata = new FormData();
		formdata.append("topic", $("#ueditor_topic").code());
		$.each($(form).serializeArray(), function(i, item) {
      formdata.append(item.name, item.value);
    });
    $.ajax({
      url: "{{url('admin/exam/insert')}}",
      type: "post",
      processData: false,
      contentType: false,
      dataType: "json",
      data: formdata,
      success:function(){
      	window.location.href = document.referrer;
      },
      error:failure
    });
		return false;
	});
</script>
@endsection
